<template>
    <view class="order-container">
        <!-- 空订单状态 -->
        <view class="empty-state" v-if="!orderList.length">
            <image class="empty-icon" src="/static/images/empty-image-error.png" mode="aspectFit"></image>
            <text class="empty-text">暂无待付款订单</text>
            <button class="go-shopping-btn" @click="goShopping">去逛逛</button>
        </view>

        <!-- 订单列表 -->
        <view class="order-item" v-else v-for="order in orderList" :key="order.order_id">
            <!-- 商品信息 -->
            <view class="goods-info">
                <view class="goods-item" v-for="goods in order.goods" :key="goods.id">
                    <image class="goods-image" :src="goods.thumb_path" mode="aspectFill"></image>
                    <view class="goods-detail">
                        <view class="goods-title">
                            <text class="goods-name text-ellipsis">{{ goods.title }}</text>
                        </view>
                        <view class="price-wrap">
                            <text class="price-symbol">¥</text>
                            <text class="goods-price">{{ goods.sell_price }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 订单底部 -->
            <view class="order-footer">
                <text class="order-time">{{ formatDate(order.add_time) }}</text>
                <view class="right-info">
                    <text class="total-label">共{{ order.number }}件商品 应付金额：</text>
                    <text class="price-symbol">¥</text>
                    <text class="total-price">{{ order.goods[0].sell_price }}</text>
                </view>
            </view>
            <!-- 订单状态 -->
            <view class="status-wrap">
                <text v-if="order.is_cancel === 0 && order.status === 0" class="order-status pending-status"
                    @click="goToOrderDetail(order.order_id)">待付款</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reqUserOrder } from '@/api/order';
import { ref } from 'vue';
import moment from 'moment';
const orderList = ref([]);

onLoad(() => {
    getUserOrder();
})
onShow(() => {
    getUserOrder();
})

// 设置中文语言
moment.locale('zh-cn');
// 格式化日期
const formatDate = (timestamp) => {
    return moment(timestamp * 1000).format('YYYY-MM-DD');
};

// 跳转到订单详情
const goToOrderDetail = (orderId) => {
    uni.navigateTo({
        url: `/pages/order_package/order/orderdetail?order_id=${orderId}`
    });
};

const goShopping = () => {
    uni.switchTab({
        url: '/pages/index/index'
    });
};
const getUserOrder = async () => {
    const res = await reqUserOrder();
    //过滤出待付款订单
    orderList.value = res.filter(item => item.status === 0 && item.is_cancel === 0);
    console.log(orderList.value);
}
</script>

<style lang="scss" scoped>
.order-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 0;
}

.order-item {
    background-color: #fff;
    margin-bottom: 20rpx;

    .goods-info {
        padding: 24rpx;

        .goods-item {
            display: flex;
            align-items: flex-start;

            .goods-image {
                margin-top: 10rpx;
                width: 160rpx;
                height: 160rpx;
                margin-right: 20rpx;
                background-color: #f8f8f8;
            }

            .goods-detail {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 160rpx;

                .goods-title {
                    margin-bottom: 50rpx;
                }

                .goods-name {
                    font-size: 28rpx;
                    color: #333;
                    line-height: 1.3;
                }

                .text-ellipsis {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }

                .price-wrap {
                    display: flex;
                    align-items: baseline;

                    .price-symbol {
                        font-size: 24rpx;
                        color: #333;
                    }

                    .goods-price {
                        font-size: 32rpx;
                        color: #333;
                    }
                }
            }
        }
    }

    .order-footer {
        padding: 20rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2rpx solid #f5f5f5;

        .order-time {
            font-size: 26rpx;
            color: #333;
        }

        .right-info {
            text-align: right;

            .total-label {
                font-size: 26rpx;
                color: #333;
            }

            .price-symbol {
                font-size: 26rpx;
                color: #333;
                margin-left: 4rpx;
            }

            .total-price {
                font-size: 26rpx;
                color: #333;
            }
        }
    }

    .status-wrap {
        padding: 0 24rpx 20rpx;
        text-align: right;

        .order-status {
            font-size: 26rpx;
            display: inline-block;
            padding: 6rpx 20rpx;
            border-radius: 4rpx;
        }

        .pending-status {
            color: #ff6b01;
            background-color: #fff1e6;
        }
    }


}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200rpx;

    .empty-icon {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
    }

    .empty-text {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 40rpx;
    }

    .go-shopping-btn {
        width: 240rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background-color: #ff6b01;
        color: #fff;
        border-radius: 40rpx;
        font-size: 28rpx;
    }
}
</style>